<template>
  <div>
    <div
      v-if="pepleishow == true"
      class="x-unit"
      @click.self="closeMask"
      :style="{height:`${deviceH}px`}"
    >
      <div class="unit-ctx" :style="{'background-image':`url(${modelBg})`}">
        <div class="ctx-title">智慧门禁</div>
        <div class="zufang_top">
          <ul>
            <li style="cursor: pointer;" @click="intelligenceDetailPageShow('人员登记数',1)">
              <img src="../../assets/images/zhihui_renyuandengji.png" alt />
              <div>
                <p>人员登记数</p>
                <p>{{rydjtotal}}</p>
              </div>
            </li>
            <li style="cursor: pointer;" @click="intelligenceDetailPageShow('当天登记数',2)">
              <img src="../../assets/images/zhihui_dtdj.png" alt />
              <div>
                <p>当天登记数</p>
                <p>{{dtdjtotal}}</p>
              </div>
            </li>
            <li style="cursor: pointer;" @click="intelligenceDetailPageShow('核查下发数',3)">
              <img src="../../assets/images/zhihui_hsxf.png" alt />
              <div>
                <p>核查下发数</p>
                <p>{{hcxftotal}}</p>
              </div>
            </li>
            <li>
              <img src="../../assets/images/zhihui_dtcr.png" alt />
              <div>
                <p>当天出入次</p>
                <p>{{dtcrtotal}}</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="zhihui_top_two">
          <div id="main" style="width: 550px;height: 230px;"></div>
          <div id="main2" style="width: 550px;height: 230px;"></div>
        </div>
        <div>
          <div class="zhihui_three">
            <div class="btn">
               <span> <x-select
                @selectItem="selectItem1"
                :name="unitTypeName1"
                :listItem="loudongList"
              /></span>
              <span @click="handleClick('1')" :class="active">南门</span>
              <span @click="handleClick2('2')" :class="active2">北门</span>
            </div>
            <div id="main3" style="width: 1170px;height: 230px;"></div>
          </div>
          <div class="zhihui_four">
            <div class="btn">
                <span> <x-select
                @selectItem="selectItem2"
                :name="unitTypeName2"
                :listItem="loudongList"
              /></span>
              <span @click="handleClick3('1')" :class="active3">南门</span>
              <span @click="handleClick4('2')" :class="active4">北门</span>
            </div>
            <div id="main4" style="width: 1170px;height: 230px;"></div>
          </div>
        </div>
      </div>
    </div>

    <!--详情页-->
    <div
      @click.self="closeMask"
      v-if="!pepleishow"
      class="x-house"
      :style="{ height: `${deviceH}px` }"
    >
      <div
        v-show="isShowCtx == 2"
        class="house-ctx page2"
        :style="{ 'background-image': `url(${modelBg1})` }"
      >
        <!--返回按钮-->
        <span @click="maskPageHide()" style="float:right;cursor:pointer;" class="back">
          <img src="../../assets/images/icon/return.png" />
        </span>
        <div class="footer-unit" style="margin-top:20px">
          <div class="unit-header">
            <div style="color:#C9FBFE;font-size:30px;">{{clickTitle}}</div>
          </div>

          <div
            style="display:flex;flex-wrap:nowrap;align-items:center;width:calc(100% - 80px);height:36px;white-space:nowrap;padding:0 40px;margin-top:1rem;"
          >
            <div class="header-item" style="margin-right:20px;">
              <input v-model="peopleName" class="input" placeholder="姓名" />
            </div>
            <div class="header-item" style="margin-right:20px;">
              <input v-model="peopleUserID" class="input" placeholder="身份证号" />
            </div>
            <el-date-picker
              v-model="totalTime"
              type="daterange"
              class="dateselect"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="background: #06121d !important;margin-right: 20px;"
            ></el-date-picker>
            <div class="header-select" style="margin-right:20px;">
              <x-select
                @selectItem="selectItem"
                :name="unitTypeName || '全部'"
                :listItem="unitTypeList"
              />
            </div>
            <div @click="searchEvent()" class="header-btn">搜索</div>
          </div>

          <div class="unit-list">
            <ul class="list-ul">
              <li class="list-li">
                <div class="item-no" style="width: 5%;">序号</div>
                <div class="li-name" style="width: 8%;">姓名</div>
                <div class="li-phone" style="width: 15%;">身份证号</div>
                <div class="li-phone" style="width: 10%;">联系电话</div>
                <div class="li-phone" style="width: 34%;">住址</div>
                <div class="li-phone" style="width: 6%;">状态</div>
                <div class="li-phone" style="width: 12%;">审核人</div>
                <div class="li-phone" style="width: 10%;">审核时间</div>
              </li>
              <li
                v-if="intelligence.length >= 0"
                v-for="(item, index) in intelligence"
                @click="showPeopleDetail(index, item)"
                :key="index"
                class="list-li"
                style="cursor: pointer;"
              >
                <div class="item-no" style="width: 5%;">{{ index + 1 + pageSize * (pageNum - 1) }}</div>
                <div class="li-name" style="width: 8%;">{{ item.truename }}</div>
                <div
                  :alt="item.cardid"
                  :title="item.cardid"
                  class="li-phone"
                  style="width: 15%;"
                >{{ new String().hideidCard(item.cardid) }}</div>
                <div
                  :alt="item.mobile"
                  :title="item.mobile"
                  class="li-phone"
                  style="width: 10%;"
                >{{ item.mobile }}</div>
                <div class="li-phone" style="width: 34%;">{{ item.cardaddress }}</div>
                <div class="li-phone" style="width: 6%;">{{ item.status }}</div>
                <div class="li-phone" style="width: 12%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ item.lastmodifiedby }}</div>
                <div class="li-phone" style="width: 10%;">{{ item.lastmodifieddate!=null?item.lastmodifieddate.substr(0,10):'' }}</div>
              </li>
            </ul>
          </div>
          <div v-if="allpage > 0" class="table-footer">
            <x-page
            :currentPage="pageNum"
              @currentChange="currentChange"
              :page-size="5"
              :allpage="allpage"
              :total-num="false"
            />
          </div>
        </div>
      </div>
      <div
        v-if="isShowCtx == 3"
        class="house-ctx page2"
        :style="{ 'background-image': `url(${modelBg1})` }"
        s
      >
        <div>
          <x-dangan :id="danganid" @changedangan="changedangan"></x-dangan>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import XPage from "@/components/xpage";
import XSelect from "@/components/xselect";
import XDangan from "@/components/xdanganmodel";
import { exportExcel } from "xlsx-oc";
import { GetEpidemicInfo,getBuildingGateByHour,getRoomGatedByDay,getRoomGatedByHoure,getBuildingGateByDay } from "@/api/peopleApi";
import { GetGateInfo } from "@/api/peopleApi";
import { getDoorAccessInfoForPage } from "@/api/peopleApi";
import loudong from './data.json'
export default {
  name: "xzhihuimenjin",
  props: {
    id: {
      type: String,
      default: ""
    },
    code: {
      type: String,
      default: ""
    },
    zhihuimenjinInfo: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  computed: {},
  data() {
    return {
      modelBg: require("@/assets/images/modelBg.png"),
      rydjtotal: "",
      dtdjtotal: "",
      hcxftotal: "",
      dtcrtotal: "",
      active: "",
      active2: "",
      active3: "",
      active4: "",
      dyzcChartX: [],
      dyzcChartY: [],
      dnzcsChartX: [],
      dnzcsChartY: [],
      dycrChartX: [],
      dycrChartY: [],
      dncrbhChartX: [],
      dncrbhChartY: [],
      gateInfoList: "",
      clickTitle: "",
      pepleishow: true,
      isShowCtx: 2,
      pageNum: 1,
      pageSize: 10,
      intelligence: [],
      alltotal: 0,
      allpage: 0,
      modelBg1: require("@/assets/images/modelBg.png"),
      peopleName: "",
      peopleUserID: "",
      peoplePhone: "",
      peopleLicense: "",
      unitTypeName: "",
      unitType: "",
      unitTypeName1: '',
      unitType1: '',
      unitTypeName2: '',
	    unitType2: '',
      unitTypeList: [
        {
          enumName: "全部",
          id: 10
        },
        {
          enumName: "审核中",
          id: 3
        },
        {
          enumName: "审核通过",
          id: 1
        },
        {
          enumName: "不通过",
          id: 2
        }
      ],
      loudongList:[],
      typeId: "",
      totalTime: "",
      startTime: "",
      endTime: "",
      danganid: ""
    };
  },
  beforeMount() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.deviceH = h;
  },
  mounted() {
    this.GetGateInfo();
  },
  components: {
    XPage,
    XSelect,
    XDangan
  },
  methods: {
    // async getData(){
    //   getBuildingGateByHour();
    //   getBuildingGateByDay();
    // },
    showPeopleDetail(index, item) {
      console.log(item);
      this.danganid = item.cardid;
      this.isShowCtx = 3;
    },
    changedangan() {
      this.isShowCtx = 2;
    },
    //获取数据
    async GetGateInfo() {
      this.loudongList=loudong.map(item=>{
        return {
          enumName: item.key,
          id: item.value
        }
      })
      this.unitType1=this.loudongList[0].id
      this.unitType2=this.loudongList[0].id
      this.unitTypeName1=this.loudongList[0].enumName
      this.unitTypeName2=this.loudongList[0].enumName
      var _this = this;
      let params = {
        code: this.$storage.get("place").leader
      };
      console.log(JSON.stringify(params));
      let gateInfoList = await GetGateInfo(params);
      _this.gateInfoList = gateInfoList;
      console.log(gateInfoList);
      _this.rydjtotal = gateInfoList[0].itmes;
      _this.dtdjtotal = gateInfoList[1].itmes;
      _this.hcxftotal = gateInfoList[2].itmes;
      _this.dtcrtotal = gateInfoList[5].itmes;

      for (let i = gateInfoList[3].itmes.length - 1; i >= 0; i--) {
        _this.dyzcChartX.push(gateInfoList[3].itmes[i].name);
        _this.dyzcChartY.push(gateInfoList[3].itmes[i].value);
      }
      for (let i = gateInfoList[4].itmes.length - 1; i >= 0; i--) {
        _this.dnzcsChartX.push(gateInfoList[4].itmes[i].name);
        _this.dnzcsChartY.push(gateInfoList[4].itmes[i].value);
      }
    let params1={
      placeId:this.$storage.get("place").leader,
      buildingId:this.unitType1
    }
      this.gateInfoList[6]=await getBuildingGateByDay(params1)
      gateInfoList[6]=this.gateInfoList[6]
      for (let i = gateInfoList[6].itmes[0].itmes.length - 1; i >= 0; i--) {
         _this.dycrChartX.push(gateInfoList[6].itmes[0].itmes[i].name);
        _this.dycrChartY.push(gateInfoList[6].itmes[0].itmes[i].value);
      }
      let params2={
         placeId:this.$storage.get("place").leader,
         buildingId:this.unitType2
      }
      this.gateInfoList[7]=await getBuildingGateByHour(params2)
      gateInfoList[7]=this.gateInfoList[7]
      for (let i = gateInfoList[7].itmes[0].itmes.length - 1; i >= 0; i--) {
         _this.dncrbhChartX.push(gateInfoList[7].itmes[0].itmes[i].name);
        _this.dncrbhChartY.push(gateInfoList[7].itmes[0].itmes[i].value);
      }

      this.getdyzc();
      this.getdnzcs();
      this.getdycr();
      this.getdncrbh();
    },
    getdyzc() {
      var _this = this;

      let echarts = document.getElementById("main2");
      let myChart = this.$echarts.init(echarts);
      myChart.setOption({
        title: {
          text: "当月注册数量趋势图",
          textStyle: {
            color: "#56FFFA"
          },
          top: "15%",
          left: "5%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: _this.dyzcChartX,
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        },
        grid: {
          top: "30%"
        },
        series: [
          {
            name: "当月注册数量",
            type: "line",
            data: _this.dyzcChartY,
            symbol: "none",
            smooth: true,
            areaStyle: {
              color: "#17495d"
            },
            lineStyle: {
              color: "#47e3ff"
            }
          }
        ]
      });
    },

    getdnzcs() {
      var _this = this;
      let echarts = document.getElementById("main");
      let myChart = this.$echarts.init(echarts);
      myChart.setOption({
        title: {
          text: "近24小时注册数量趋势图",
          textStyle: {
            color: "#56FFFA"
          },
          top: "15%",
          left: "5%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: _this.dnzcsChartX.reverse(),
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        },
        grid: {
          top: "30%"
        },
        series: [
          {
            name: "注册数量",
            type: "line",
            data: _this.dnzcsChartY.reverse(),
            symbol: "none",
            smooth: true,
            areaStyle: {
              color: "#66DEA55C"
            },
            lineStyle: {
              color: "#DEA55C"
            }
          }
        ]
      });
    },

    async getdycr() {
      var _this = this;
      let echarts = document.getElementById("main3");
      let myChart = this.$echarts.init(echarts);
      myChart.setOption({
        title: {
          text: "当月出入变化趋势图",
          textStyle: {
            color: "#56FFFA"
          },
          top: "15%",
          left: "3%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: _this.dycrChartX,
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        },
        grid: {
          top: "30%",
          left: "5%"
        },
        series: [
          {
            name: "当月出入数量",
            type: "line",
            data: _this.dycrChartY,
            symbol: "none",
            smooth: true,
            areaStyle: {
              color: "#17495d"
            },
            lineStyle: {
              color: "#47e3ff"
            }
          }
        ]
      });
    },

    getdncrbh() {
      var _this = this;
      let echarts = document.getElementById("main4");
      let myChart = this.$echarts.init(echarts);
      myChart.setOption({
        title: {
          text: "当天出入变化趋势图",
          textStyle: {
            color: "#56FFFA"
          },
          top: "15%",
          left: "3%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: _this.dncrbhChartX,
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        },
        grid: {
          top: "30%",
          left: "5%"
        },
        series: [
          {
            name: "当天出入数量",
            type: "line",
            data: _this.dncrbhChartY,
            symbol: "none",
            smooth: true,
            areaStyle: {
              color: "#66DEA55C"
            },
            lineStyle: {
              color: "#DEA55C"
            }
          }
        ]
      });
    },

    async handleClick(i) {
      var _this = this;
      if (this.active == "") {
        this.active = "active";
        this.active2 = "";
        _this.dycrChartX = [];
        _this.dycrChartY = [];
        // for (
        //   let i = _this.gateInfoList[6].itmes[0].itmes.length - 1;
        //   i >= 0;
        //   i--
        // ) {
        //   _this.dycrChartX.push(_this.gateInfoList[6].itmes[0].itmes[i].name);
        //   _this.dycrChartY.push(_this.gateInfoList[6].itmes[0].itmes[i].value);
        // }
          let params = {
        placeId: this.$storage.get("place").leader,
        buildingId:i
      };
      var res=await getRoomGatedByDay(params)
      for (let i = res.itmes[0].itmes.length - 1; i >= 0; i--) {
         _this.dycrChartX.push(res.itmes[0].itmes[i].name);
        _this.dycrChartY.push(res.itmes[0].itmes[i].value);
      }
        this.getdycr();
      } else {
        this.active = "";
      }
    },
    async handleClick2(i) {
      var _this = this;
      if (this.active2 == "") {
        this.active2 = "active";
        this.active = "";
        _this.dycrChartX = [];
        _this.dycrChartY = [];
        let params = {
        placeId: this.$storage.get("place").leader,
        buildingId:i
      };
      var res=await getRoomGatedByDay(params)
      for (let i = res.itmes[0].itmes.length - 1; i >= 0; i--) {
         _this.dycrChartX.push(res.itmes[0].itmes[i].name);
        _this.dycrChartY.push(res.itmes[0].itmes[i].value);
      }
        // getRoomGatedByDay()
        // for (
        //   let i = _this.gateInfoList[6].itmes[1].itmes.length - 1;
        //   i >= 0;
        //   i--
        // ) {
        //   _this.dycrChartX.push(_this.gateInfoList[6].itmes[1].itmes[i].name);
        //   _this.dycrChartY.push(_this.gateInfoList[6].itmes[1].itmes[i].value);
        // }
        this.getdycr();
      } else {
        this.active2 = "";
      }
    },
    async handleClick3(i) {
      var _this = this;
      if (this.active3 == "") {
        this.active3 = "active";
        this.active4 = "";
        _this.dncrbhChartX = [];
        _this.dncrbhChartY = [];
          let params = {
          placeId:this.$storage.get("place").leader,
         buildingId:i
      };
          var res=await getRoomGatedByHoure(params)
      for (let i = res.itmes[0].itmes.length - 1; i >= 0; i--) {
         _this.dncrbhChartX.push(res.itmes[0].itmes[i].name);
        _this.dncrbhChartY.push(res.itmes[0].itmes[i].value);
      }

        this.getdncrbh();
      } else {
        this.active3 = "";
      }
    },
    async handleClick4(i) {
      var _this = this;
      if (this.active4 == "") {
        this.active4 = "active";
        this.active3 = "";
        _this.dncrbhChartX = [];
        _this.dncrbhChartY = [];
         let params = {
          placeId:this.$storage.get("place").leader,
         buildingId:i
      };
          var res=await getRoomGatedByHoure(params)
      for (let i = res.itmes[0].itmes.length - 1; i >= 0; i--) {
         _this.dncrbhChartX.push(res.itmes[0].itmes[i].name);
        _this.dncrbhChartY.push(res.itmes[0].itmes[i].value);
      }
        this.getdncrbh();
      } else {
        this.active4 = "";
      }
    },

    intelligenceDetailPageShow(titleName, num) {
      this.clickTitle = "智慧门禁：" + titleName;
      this.typeId = num;
      this.pepleishow = false;
      this.carDetailPage();
    },
    async carDetailPage() {
      var data = {};
      var _this = this;
      _this.intelligence = [];
      data.placeId = this.code;
      data.pageNum = this.pageNum;
      data.pageSize = this.pageSize;
      data.typeId = this.typeId;

      if (this.peopleName != "") {
        data.name = this.peopleName;
      }
      if (this.peopleUserID != "") {
        data.idNum = this.peopleUserID;
      }
      if (this.totalTime != "") {
        console.log(this.totalTime);
        data.startTime = this.totalTime[0];
        data.endTime = this.totalTime[1];
      }
      if (this.unitType == 1) {
        data.statusType = 1;
      } else if (this.unitType == 2) {
        data.statusType = 2;
      } else if (this.unitType == 10) {
        data.statusType = "";
      } else if (this.unitType == 3) {
        data.statusType = 0;
      }

      console.log("=-=-" + JSON.stringify(data));

      const res = await getDoorAccessInfoForPage(data);
      console.log("**********");
      console.log(JSON.stringify(res));
      this.intelligence = res.list;
      this.alltotal = res.total;
      this.allpage = Math.ceil(this.alltotal / this.pageSize);
    },
    //从详情页返回人口页面
    maskPageHide() {
      this.pepleishow = true;
      this.pageNum = 1;
      this.peopleName = "";
      this.peopleUserID = "";
      this.unitTypeName = "";
      this.unitType = "";
      this.totalTime = "";
      this.startTime = "";
      this.endTime = "";
      this.$nextTick(function() {
        this.getdyzc();
        this.getdnzcs();
        this.getdycr();
        this.getdncrbh();
      });
    },
    currentChange(n) {
      console.log(n);
      console.log("分页");
      this.pageNum = n;
      this.carDetailPage();
    },
    async searchEvent() {
      // console.log("===" + this.unitType);
      // if (
      //   this.peopleName == "" &&
      //   this.peopleUserID == "" &&
      //   this.totalTime == "" &&
      //   this.unitType == ""
      // ) {
      //   console.log("stop");
      //   return;
      // }
      console.log("pass");
      this.pageNum = 1;
      this.currentChange(1);
    },
    //选择下拉框
    selectItem(name, id) {
      this.unitTypeName = name;
      this.unitType = id;
    },
     async selectItem1(name, id) {
       console.log(name)
       console.log(id)
      this.unitTypeName1 = name;
      this.unitType1 = id;
      let params1={
        placeId:this.$storage.get("place").leader,
        buildingId:this.unitType1
      }
       this.dycrChartX=[]
       this.dycrChartY=[]
      var res=await getBuildingGateByDay(params1)
      for (let i = res.itmes[0].itmes.length - 1; i >= 0; i--) {
         this.dycrChartX.push(res.itmes[0].itmes[i].name);
        this.dycrChartY.push(res.itmes[0].itmes[i].value);
      }
        this.getdycr();
    },
    async selectItem2(name, id) {
      this.unitTypeName2 = name;
      this.unitType2 = id;
       let params2={
         placeId:this.$storage.get("place").leader,
         buildingId:this.unitType2
      }
      var res=await getBuildingGateByHour(params2)
      this.dncrbhChartX=[]
      this.dncrbhChartY=[]
      for (let i = res.itmes[0].itmes.length - 1; i >= 0; i--) {
         this.dncrbhChartX.push(res.itmes[0].itmes[i].name);
        this.dncrbhChartY.push(res.itmes[0].itmes[i].value);
      }
       this.getdncrbh();
    },
    //关闭
    closeMask() {
      this.$emit("closeMask");
    }
  }
};
</script>
<style lang="less">
.el-input__prefix {
  display: none;
}

.el-input__inner {
  height: 100% !important;
  width: 100%;
  background: transparent;
  padding: 0 !important;
  border: none;
}
</style>

<style lang="less" scoped>
.x-unit {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;

  .unit-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;

    .ctx-title {
      width: 100%;
      padding-top: 35px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
    }

    .zufang_top {
      margin-top: 30px;

      ul {
        list-style: none;
        overflow: hidden;

        li {
          float: left;
          width: 266px;
          overflow: hidden;
          border-right: 4px solid #69f1f7;
          height: 69px;

          img {
            float: left;
            margin-left: 50px;
            margin-top: 10px;
          }

          div {
            float: left;
            color: #69f1f7;
            margin-top: -9px;
            margin-left: 14px;
            text-align: left;

            p:nth-child(1) {
              font-size: 22px;
            }

            p:nth-child(2) {
              font-size: 18px;
              margin-top: -15px;
            }
          }
        }

        li:nth-child(1) {
          margin-left: -30px;
        }

        li:nth-child(4) {
          border-right: none;
        }
      }
    }

    .zhihui_top_two {
      overflow: hidden;
      margin-left: 6px;

      #main {
        float: left;
      }

      #main2 {
        float: left;
      }
    }

    .zhihui_three {
      margin-top: -38px;
      position: relative;

      .btn {
        position: absolute;
        right: 65px;
        top: 34px;
        z-index: 999;

        span {
          cursor: pointer;
          display: inline-block;
          width: 52px;
          height: 24px;
          background: #16745f;
          border-radius: 4px;
          line-height: 24px;
          font-size: 12px;
          text-align: center;
        }

        span.active {
          background: #50e3c2;
        }

        span:nth-child(1) {
          width: 152px;
          margin-right: 5px;
        }
      }
    }

    .zhihui_four {
      margin-top: -38px;
      position: relative;

      .btn {
        position: absolute;
        right: 65px;
        top: 34px;
        z-index: 999;

        span {
          cursor: pointer;
          display: inline-block;
          width: 52px;
          height: 24px;
          background: #16745f;
          border-radius: 4px;
          line-height: 24px;
          font-size: 12px;
          text-align: center;
        }

        span.active {
          background: #50e3c2;
        }

        span:nth-child(1) {
          width: 152px;
          margin-right: 5px;
        }
      }
    }
  }
}

.x-house {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;

  .text-left.page2 {
    text-align: left;
  }

  .page2 {
    .unit-list {
      .list-li:nth-child(even) {
        background-color: #06121d;
      }
    }

    .back {
      float: right;
      position: absolute;
      right: 60px;
      width: 0px;
      top: 30px;

      img {
        width: 30px;
        height: 30px;
      }
    }

    .tabbar {
      padding: 0;
      margin: 0;
      list-style: none;
      text-align: left;
      text-align: left;
      margin-top: 20px;

      .tabbarContent {
        & > li,
        & > ul {
          padding: 0;
          margin: 0;
          list-style: none;
          color: #fff;
        }

        li {
          width: 33%;
          display: inline-block;
          padding-top: 10px;
          padding-bottom: 10px;

          span {
            width: 40%;
            display: inline-block;
          }
        }
      }

      & > li {
        display: inline-block;
        padding: 5px;
        border-radius: 4px;
        background: #0f0f2b;
        font-size: 16px;
        color: #fff;
      }

      .list-li:nth-child(even) {
        background-color: #06121d;
      }
    }

    .tabbar .active {
      background: #3f8aff;
      color: #fff;
    }

    .name {
      width: 100%;
      text-align: left;
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: #69d3da;
      letter-spacing: 0;
      overflow: hidden;
      white-space: nowrap;
      word-break: normal;
      text-overflow: ellipsis;
      margin-top: 20px;

      & > span {
        line-height: 2;
      }
    }

    .choose {
      float: right;
      padding: 0;
      margin: 0;
      position: relative;
      top: 0;
    }

    .choose ul,
    .choose li {
      list-style: none;
      display: inline-block;
    }

    .choose li {
      padding: 8px;
      border-radius: 4px;
      background: #0f0f2b;
      cursor: pointer;
    }

    .choose .active {
      background: #3f8aff;
      color: #fff;
    }

    .car-li {
      flex-wrap: wrap;

      .carDetail {
        display: flex;
        align-items: center;
        flex-grow: 1;
        width: 100% !important;

        & > div {
          width: 20%;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      & > div {
        width: 20% !important;
      }
    }

    .list-li {
      width: 100%;
      height: 50px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffffff;
      line-height: 36px;

      & > div {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 22px;
        width: 100%;
      }

      & > .button-color {
        color: #3f8aff;
      }
    }
  }

  .house-ctx::-webkit-scrollbar {
    width: 0px;
    height: 16px;
    background-color: #ccc;
  }

  .house-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    overflow-y: auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;

    .ctx-title {
      width: 100%;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
    }

    .ctx-info {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 28px;

      .info-item {
        flex: 1;
        height: 180px;

        .item-rs {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .rs-content {
            width: 50%;
            height: 100%;

            .content-name {
              width: 100%;
              font-family: PingFangSC-Medium;
              font-size: 18px;
              color: #69d3da;
              letter-spacing: 0;
              text-align: left;

              .iconfont {
                font-size: 22px;
                margin-right: 8px;
              }
            }

            .content-number {
              font-family: Silom;
              font-size: 40px;
              margin-top: 18px;
              text-align: left;
              color: #d0b01c;
              letter-spacing: 2.22px;
              line-height: 40px;

              .unit {
                font-family: PingFangSC-Medium;
                font-size: 18px;
                color: #69d3da;
                letter-spacing: 0;
              }
            }
          }
        }

        .item-name {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          text-align: left;

          .iconfont {
            font-size: 22px;
            margin-right: 8px;
          }
        }

        .item-number {
          margin-top: 20px;
          font-family: Silom;
          font-size: 40px;
          color: #d0b01c;
          letter-spacing: 2.22px;
          text-align: left;
        }

        .item-pie {
          width: 100%;
          height: 140px;
          margin-top: 10px;
          padding: 5px 0px;
          box-sizing: border-box;

          .pie-canvas {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .ctx-footer {
      width: 100%;
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .footer-floor::-webkit-scrollbar {
        width: 0px;
        height: 16px;
        background-color: #ccc;
      }

      .footer-floor {
        flex: 1;
        height: 445px;
        overflow-y: auto;

        .floor-name {
          width: 100%;
          text-align: left;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          overflow: hidden;
          white-space: nowrap;
          word-break: normal;
          text-overflow: ellipsis;
        }

        .floor-list {
          width: 100%;
          height: clac(100% - 25px);
          overflow-y: auto;
          margin-top: 20px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .list-name {
            width: 55px;
            text-align: left;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #e9e9e9;
            min-width: 55px;
          }

          .kongzhi {
            background-color: #474747;
          }

          .qunzu {
            background-color: #ca504b;
          }

          .zizhu {
            background-color: #336298;
          }

          .chuzu {
            background-color: #c1812d;
          }

          .list-rs {
            //width: calc(100% - 55px);
            cursor: pointer;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            margin: 10px;
            margin-top: 0;
            margin-bottom: 0;

            .rs-item {
              width: 60px;
              height: 25px;
              text-align: center;
              line-height: 25px;
              font-family: PingFangSC-Regular;
              font-size: 16px;
              color: #e9e9e9;
              text-align: center;
              cursor: pointer;

              &.item-empty {
                background: #474747;
              }

              &.item-self {
                background: #21629c;
              }

              &.item-rent {
                background: #cc7f01;
              }

              &.item-other {
                background: #da4545;
              }
            }
          }
        }
      }

      .footer-unit::-webkit-scrollbar {
        width: 0px;
        height: 16px;
        background-color: #ccc;
      }

      .footer-unit {
        flex: 1;
        height: 450px;
        overflow-y: auto;

        .unit-header {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .header-btn {
            width: 60px;
            height: 32px;
            background: #102c45;
            margin-right: 3px;
            line-height: 32px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;

            &:first-child {
              border-top-left-radius: 4px;
              border-bottom-left-radius: 4px;
            }

            &:last-child {
              border-top-right-radius: 4px;
              border-bottom-right-radius: 4px;
              margin-right: 0;
            }

            &.active {
              background: #209cff;
            }
          }
        }

        .unit-list {
          width: 100%;
          height: clac(100% - 25px);

          margin-top: 30px;

          .list-title {
            font-family: PingFangSC-Semibold;
            font-size: 16px;
            color: #ffffff;
            text-align: center;
            line-height: 22px;
          }

          .list-ul {
            width: 90%;
            height: clac(100% - 25px);
            margin-top: 15px;
            overflow-y: auto;
            list-style: none;

            .list-li:nth-child(even) {
              background-color: #06121d;
            }

            .list-li {
              cursor: pointer;
              width: 100%;
              height: 36px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #ffffff;
              line-height: 36px;

              .item-no {
                width: 30%;

                box-sizing: border-box;
              }

              .li-name {
                width: 50%;

                box-sizing: border-box;
              }

              .li-sex {
                width: 40%;

                box-sizing: border-box;
              }

              .li-age {
                width: 40%;

                box-sizing: border-box;
              }

              .li-phone {
                box-sizing: border-box;
                width: 10%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}

.input {
  font-size: 14px;
  color: #fff;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
}

.header-item {
  width: 186px;
  height: 100%;
  border: none;
  outline: none;
  background: #06121d;
  border: 1px solid rgba(62, 178, 215, 0);
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  padding: 0 14px;
  box-sizing: border-box;
}

.header-btn {
  width: 66px;
  height: 100%;
  background: #72edf5;
  border-radius: 4px;
  text-align: center;
  line-height: 36px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #000000;
  cursor: pointer;
}

.header-select {
  width: 186px;
  height: 100%;
}
</style>
<style lang="">
.dateselect .el-input__inner {
  background: #06121d !important;
}
	.dateselect{
      border:1px solid grey !important;
    }
.el-date-editor .el-range-input {
  background: #06121d !important;
}
</style>
